/**
* 基金 用户须知弹窗组件，
* 例子使用： this.$store.dispatch('setModal',{visible:true,modalId:Constant.modal.FUND_NEED_KNOW_MODAL});
*/
<template>
  <transition name="slide-fade">
    <div class="modal" v-if="modal.visible && modal.modalId=='fundNeedKnowModal'" id="fundNeedKnowModal" tabindex="-1"
         @click.stop.prevent="modalHide">
      <div class="modal-dialog" @click.stop.prevent>
        <div class="modal-content fund-modal">
          <img src="~assets/images/tankuang-m@2x.png" class="img-responsive">
          <img src="~assets/images/close@2x.png" data-dismiss="modal" class="img-close" @click.stop.prevent="modalHide">
          <div class="title">用户须知</div>
          <div class="wrapper">
            <p>
              大王!<span>欢迎来到牛人牛股模拟开放式基金!</span>这是一个超仿真的模拟平台，你可以运用虚拟资金尝试模拟交易开放式基金。但是特别提醒您：当<span>某些基金的认购申购时期突然发生变化</span>(这种情况极少发现)，<span>会导致模拟成交情况和实盘结果不同,请您多包涵呢~</span>祝您愉快~
            </p>
            <button type="button" class="btn btn-lg" @click.stop.prevent="modalHide">知道啦</button>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
  import BaseModal from 'components/modal/BaseModal'

  export default {
    data () {
      return {}
    },
    extends: BaseModal
  }
</script>

<style scoped>
  span {
    color: #40B5EB;
  }
</style>

<style scoped>
  .slide-fade-enter-active, .slide-fade-leave-active {
    transition: all 0.3s ease;
  }

  .slide-fade-enter, .slide-fade-leave-active {
    transform: translate(0, -25%);
    opacity: 0;
  }
  .modal-content.fund-modal .title{
    top: 6.5%;
    font-size: 22px;
  }
  @media (max-width: 370px) {
    .modal-content.fund-modal .wrapper  p{
      font-size: 17px;
    }
  }
  @media (max-width: 360px) {
    .modal-content.fund-modal .wrapper  p{
      font-size: 16px;
    }
  }
  @media (max-width: 330px) {
    .modal-content.fund-modal .title{
      top: 6%;
      font-size: 19px;
    }
    .modal-content.fund-modal .wrapper  p{
      font-size: 15px;
    }
  }
</style>
